import React,{Component} from 'react';
import {Row,Col,Button,Form,Input,Select,Table,Pagination} from 'antd';
import './TableItem.css';

const FormItem=Form.Item;
const SelectOption=Select.Option;

class TableItem extends Component{
    constructor(props){
        super(props);
        this.state={};
        this.myFre=React.createRef()
    }

    render() {
        const {btnList}=this.props;
        const {dataSource,columns,minWidth,pagination}=this.props.tableSetting;
        const {getFieldDecorator}=this.props.form;
        return(
            <div>
                <Row gutter={16}>
                    <Col sx={24} sm={24} lg={8} xl={7}>
                        {
                            btnList&&btnList.map((item,index)=>{
                                return(
                                    <Button
                                        key={index}
                                        icon={item.icon}
                                        type={item.type}
                                        className={'tableItemBtn'}
                                        onClick={item.handleOnClick.bind(this,'32')}
                                    >
                                        {item.label}
                                    </Button>
                                )
                            })
                        }
                    </Col>
                    <Col sx={24} sm={24} lg={16} xl={17} className={'formContainer'}>
                        {
                            this.handleGetForm(getFieldDecorator)
                        }
                    </Col>
                </Row>
                <Row className={'tableContainer'}>
                    <Table dataSource={dataSource} columns={columns} style={{minWidth:minWidth}} pagination={false} />
                    {
                        pagination?
                            <div className={'paginationContainer'} style={{minWidth:minWidth}}>
                                <Pagination
                                    total={pagination.total}
                                    showTotal={total => `总记录：${total} `}
                                    pageSize={pagination.pageSize}
                                    current={pagination.current}
                                    defaultCurrent={1}
                                    showSizeChanger={pagination.showSizeChanger}
                                    showQuickJumper={pagination.showQuickJumper}
                                />
                            </div>:''
                    }
                </Row>
            </div>
        )
    }

    componentDidMount() {
        console.log(this)
        console.log(this.myFre)
    }

    /**
     * 获取搜索表单
     * @returns {null|*}
     */
    handleGetForm(getFieldDecorator){
        const _this=this;
        const {FormItemList}=this.props;
        if(FormItemList&&FormItemList.length>0){
            return(
                <Form layout={'inline'}>
                    {
                        FormItemList.map((item,index)=>{
                            return(
                                <span key={index}>
                                    {
                                        _this.handleGetFormItem(item,getFieldDecorator)
                                    }
                                </span>
                            )
                        })
                    }
                    <FormItem>
                        <Button type={'primary'} onClick={()=>this.handleSearch()} ref={this.myFre}>
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            )
        }else{
            return null;
        }
    }

    /**
     * 获取搜索表单项
     * @param item
     * @param getFieldDecorator
     */
    handleGetFormItem(item,getFieldDecorator){
        switch (item.type) {
            case "Input":
                return <FormItem>
                    {
                        getFieldDecorator(item.label)(
                            <Input placeholder={item.placeholder}/>
                        )
                    }
                </FormItem>;
            case "Select":
                return <FormItem>
                    {
                        getFieldDecorator(item.label)(
                            <Select placeholder={item.placeholder} style={{width:item.width}}>
                                {
                                    item.options.map((option,index)=>{
                                        return(
                                            <SelectOption key={index} value={option.value}>{option.label}</SelectOption>
                                        )
                                    })
                                }
                            </Select>
                        )
                    }
                </FormItem>;
            default:
                return null;
        }
    }

    /**
     * 获取
     */
    handleSearch(){
        this.props.form.validateFields((err,value)=>{
            console.log(err,value);
        })
    }
}
TableItem.propTypes={

};
export default Form.create()(TableItem);
